<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.*" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>火灾防护知识</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-orange-50 min-h-screen">
    <!-- 预警条 -->
    <div class="bg-gradient-to-r from-orange-500 to-red-500 text-white text-center py-2">
        <i class="fas fa-fire-extinguisher mr-2"></i>火灾高发季节，请注意用火安全！
    </div>
    <!-- 标题区 -->
    <div class="max-w-4xl mx-auto mt-8">
        <h1 class="text-4xl font-bold text-orange-700 mb-2 flex items-center"><i class="fas fa-fire mr-3"></i>火灾防护知识</h1>
        <p class="text-orange-600 text-lg mb-6">掌握火灾预防与应急处理，守护生命安全</p>
        <!-- 卖点卡片区 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
            <div class="bg-white rounded-xl shadow p-5 flex flex-col items-center">
                <i class="fas fa-burn text-3xl text-orange-500 mb-2"></i>
                <div class="font-bold text-lg">火源管理</div>
                <div class="text-sm text-gray-500">远离易燃物，规范用火用电</div>
            </div>
            <div class="bg-white rounded-xl shadow p-5 flex flex-col items-center">
                <i class="fas fa-door-open text-3xl text-orange-500 mb-2"></i>
                <div class="font-bold text-lg">逃生通道</div>
                <div class="text-sm text-gray-500">保持通道畅通，熟悉疏散路线</div>
            </div>
            <div class="bg-white rounded-xl shadow p-5 flex flex-col items-center">
                <i class="fas fa-fire-extinguisher text-3xl text-orange-500 mb-2"></i>
                <div class="font-bold text-lg">灭火器材</div>
                <div class="text-sm text-gray-500">定期检查，学会正确使用</div>
            </div>
        </div>
        <!-- 预防措施 -->
        <div class="bg-orange-100 rounded-xl p-6 mb-6">
            <h2 class="text-2xl font-semibold text-orange-700 mb-2"><i class="fas fa-shield-alt mr-2"></i>火灾预防措施</h2>
            <ul class="list-disc pl-6 text-orange-800 space-y-1">
                <li>不乱扔烟头，远离易燃物。</li>
                <li>电器设备定期检查，避免超负荷用电。</li>
                <li>厨房用火后及时关闭燃气阀门。</li>
                <li>不在楼道、阳台堆放杂物。</li>
                <li>定期组织家庭或单位消防演练。</li>
            </ul>
        </div>
        <!-- 应急处理 -->
        <div class="bg-white rounded-xl shadow p-6 mb-6">
            <h2 class="text-2xl font-semibold text-orange-700 mb-2"><i class="fas fa-running mr-2"></i>火灾应急处理</h2>
            <ul class="list-decimal pl-6 text-orange-800 space-y-1">
                <li>保持冷静，迅速判断火势，选择安全逃生路线。</li>
                <li>用湿毛巾捂住口鼻，低姿前行。</li>
                <li>切勿乘坐电梯逃生。</li>
                <li>如被困，及时拨打119并发出求救信号。</li>
                <li>如身上着火，切勿奔跑，及时就地打滚灭火。</li>
            </ul>
        </div>
        <!-- 紧急电话 -->
        <div class="bg-orange-200 rounded-xl p-4 mb-6 flex items-center">
            <i class="fas fa-phone-alt text-2xl text-orange-600 mr-4"></i>
            <span class="text-lg font-bold text-orange-800">火警电话：119</span>
        </div>
        <!-- 家庭急救包 -->
        <div class="bg-white rounded-xl shadow p-6 mb-10">
            <h2 class="text-2xl font-semibold text-orange-700 mb-2"><i class="fas fa-briefcase-medical mr-2"></i>家庭急救包建议</h2>
            <ul class="list-disc pl-6 text-orange-800 space-y-1">
                <li>灭火毯、小型灭火器</li>
                <li>口罩、湿毛巾</li>
                <li>手电筒、备用电池</li>
                <li>常用药品、创可贴</li>
                <li>饮用水、应急食品</li>
            </ul>
        </div>
    </div>
</body>
</html> 